<template>
  <div class="bg-box">
    <t-table
      row-key="index"
      table-layout="auto"
      class="plugin-reports-supplier-table"
      :data="list"
      :columns="columns"
      :footData="[total]"
      hover
    >
      <template #time="{ rowIndex }">
        <div class="time">{{ time[rowIndex] }}</div>
      </template>
      <template #count="{ row }">
        {{ row.c ?? 0 }}
      </template>
      <template #goods_count="{ row }">
        {{ row.gc ?? 0 }}
      </template>
      <template #tax="{ row }">
        {{ app.money.format(row.tx) }}
      </template>
      <template #total="{ row }">
        <b>{{ app.money.format(row.t) }}</b>
      </template>

      <template #footCount>
        {{ total.count }}
      </template> 
      <template #footGoodsCount>
        {{ total.goods_count }}
      </template> 
      <template #footTax>
        {{  app.money.format(total.tax) }}
      </template> 
      <template #footTotal>
        <div class="total" style="text-align: right">{{ app.money.format(total.total) }}</div>
      </template> 
    </t-table>
  </div>
</template>
<script setup>
  import app from '@/app'
  import index from '../../index'

  const props = defineProps(['total', 'list', 'time'])
  const plugin = index.plugin
  const columns = [{
    colKey: 'time',
    cell: 'time'
  }, {
    title: plugin.t('supplier.count'),
    colKey: 'count',
    cell: 'count',
    foot: 'footCount'
  }, {
    title: plugin.t('supplier.goods_count'),
    colKey: 'goods_count',
    cell: 'goods_count',
    foot: 'footGoodsCount'
  }, {
    title: plugin.t('supplier.tax'),
    colKey: 'tax',
    cell: 'tax',
    foot: 'footTax'
  }, {
    title: plugin.t('supplier.total'),
    colKey: 'total',
    align: 'right',
    fixed: 'right',
    foot: 'footTotal'
  }]
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-reports-supplier-table{
    .time{
      color: $color-content;
    }
    .total{
      color: $color;
      font-weight: bold;
    }
  }
</style>